<template>
  <f7-card class="demo-facebook-card">
    <f7-card-header class="no-border">
      <div class="demo-facebook-avatar">
        <img src="../../assets/face.png" width="50px">
      </div>
      <div class="demo-facebook-name">{{stuinfo.stuname}}</div>
      <div class="demo-facebook-date">{{stuinfo.stuclass}}</div>
      <div class="demo-facebook-date">学籍号：{{stuinfo.stuid}}</div>
    </f7-card-header>
    <f7-card-content :padding="false">
      <f7-block-title>身份证</f7-block-title>
      <form id="checkhomeform">
        <f7-list>
          <f7-list-input
            name="fpid"
            id="fpid"
            outline
            :label="fname+'身份证号'"
            floating-label
            type="text"
            :placeholder="fname+'身份证号'"
            clear-button
            required
            validate
            @input="testvali"
            
          ></f7-list-input>
          <f7-list-input
            name="spid"
            id="spid"
            outline
            :label="sname+'身份证号'"
            floating-label
            type="text"
            :placeholder="sname+'身份证号'"
            clear-button
            required
            v-if="!stuinfo.sigle"
            validate
            @input="testvali"
          ></f7-list-input>
        </f7-list>
      </form>
    </f7-card-content>
    <f7-card-footer class="no-border">
      <f7-button fill color="green" @click="pre" style="margin-right:5px;">上一步</f7-button>
      <f7-button fill color="green" @click="next" style="margin-left:5px;">完成</f7-button>
    </f7-card-footer>
  </f7-card>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
data() {
    return {
      fname: "监护人1",
      sname: "监护人2"
    };
  },
  mounted() {
    this.$f7.form.fillFromData("#checkhomeform", this.stuinfo);
    if (this.stuinfo.fname.length > 1) this.fname = this.stuinfo.fname;
    if (this.stuinfo.sname.length > 1) this.sname = this.stuinfo.sname;
  },
  props: ["stuinfo"],
  methods: {
    ...mapActions("graduate", ["modiGraduateInfoAttr"]),
    tempsave(){
        let formdata = this.$f7.form.convertToData("#checkhomeform");
        this.modiGraduateInfoAttr({
            key:'fpid',
            value:formdata.fpid
        })
        this.modiGraduateInfoAttr({
            key:'spid',
            value:formdata.spid
        })
    },
    pre(){
        this.tempsave()
        this.$emit('prepage','checkhome')
    },
    next(){
      if (!document.forms["checkhomeform"].reportValidity()) return;
        this.tempsave()
        this.$emit('nextpage','finished')
    },
    testvali(e){
          // pattern="^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$"
      // console.log(e.target.value)
      var city={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外 "};
      if(!/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(e.target.value)){
        e.target.setCustomValidity("身份证号格式错误！");
      }else if(!city[e.target.value.substr(0,2)]){
        e.target.setCustomValidity("身份证号前两位错误！")
      }else if(e.target.value.length == 18){
            let code = e.target.value.split('');
            //∑(ai×Wi)(mod 11)
            //加权因子
            var factor = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ];
            //校验位
            var parity = [ 1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2 ];
            var sum = 0;
            var ai = 0;
            var wi = 0;
            for (var i = 0; i < 17; i++)
            {
                ai = code[i];
                wi = factor[i];
                sum += ai * wi;
            }
            var last = parity[sum % 11];
            if(parity[sum % 11] != code[17]){
                e.target.setCustomValidity("校验位错误");
            }else{
              e.target.setCustomValidity("")
            }
          }else{
            e.target.setCustomValidity("")
          }
    }
  }
}
</script>

<style>
</style>
